<template>
	<view>
		<div class="xjsy xjsy2">
			<div class="tjrq">
				<view class="daterange">
					<text>兑换日期：</text>
					<uni-datetime-picker @change="changeDateTime" ref="daterange" v-model="range" type="daterange"
						:border="false" rangeSeparator="-">
						<text>{{range[0]}} - {{range[1]}}</text>
					</uni-datetime-picker>
					<uni-icons type="bottom" size="24" color="#ccc"></uni-icons>
				</view>
			</div>

			<div class="ymx" style="margin-top:0">
				<h2>兑换明细</h2>
				<div class="shmx">
					<div class="wdddbox wdddbox2">
						<dl>
							<dt>名称</dt>
							<dt>兑换时间</dt>
							<dt>兑换积分</dt>
						</dl>
						<dl v-for="item in lists || []" :key="item.id">
							<dt>{{item.commodityName || '-'}}</dt>
							<dt>{{item.createTime}}</dt>
							<dt>{{item.orderAmt}}</dt>
						</dl>
						<empty  v-if="lists && lists.length<1"/>
					</div>
				</div>
			</div>
	
		</div>
	</view>
</template>

<script>
	import tool from "@/common/tool.js"
	import order from "@/common/order.js"
	import {getMallOrderList} from '@/api/index.js'
	import user from "@/common/user.js"
	import empty from "@/components/empty/empty.vue"
	export default {
		components:{
			empty
		},
		data() {
			return {
				page: 1,
				size:30,
				range: [],
				lists: '',
			}
		},
		// 滑动到距离底部100px的时候触发（上拉加载）
		// onReachBottom() {
		//     console.log('加载更多...');
		// 	this.page++
		// 	this.getOrderList()
		// },
		onLoad() {
			let date = new Date();
			this.range[0] = tool.dateFormat('Y-m-d', date.getTime() - (86400 * 90) * 1000)
			this.range[1] = tool.dateFormat('Y-m-d', date.getTime())
			this.getOrderList()
		},
		
		methods: {
			async getOrderList(){
				let params = {
					userId:user.getUserId(),
					current:this.page,
					size:this.size
				}
				if(this.range[0]){
					params.startCreateTime = this.range[0]
				}
				if(this.range[1]){
					params.endCreateTime = this.range[1]
				}
				const res = await getMallOrderList(params)
				console.log("YYY:",res)
				this.lists = res.records ? res.records : []
			},
			changeDateTime(e) {
				this.range[0] = e[0]
				this.range[1] = e[1]
				this.lists = ''
				this.page = 1
				this.getOrderList()
			}
		}
	}
</script>
<style>
	page {
		padding-bottom: 0;
	}
</style>
<style lang="scss">
	.xjsy2{
		padding-top: 100rpx;
		padding-bottom: 0;
		.tjrq{
			box-sizing: border-box;
			position: fixed;
			z-index: 200;
			width: 100%;
			left: 0;
			top: var(--window-top);
			background-color: #f1f1f1;
			padding: 0 30rpx;
		}
	}
	.tjrq {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;

		.daterange {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.wby1 {
			width: 120rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}
	.wdddbox{
		&.wdddbox2{
			dl{
				border-bottom: 1px solid #e5e5e5;
			}
		}
	}
</style>
